<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>实现一个简单的弹出式窗口</title>
        <link rel="stylesheet" href="../include/ol.css" type="text/css">
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">

        <script src="../include/ol.js"></script>
        <style>
                .ol-popup {
                    position: absolute;
                    background-color: white;
                    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
                    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
                    padding: 15px;
                    border-radius: 10px;
                    border: 1px solid #cccccc;
                    bottom: 12px;
                    left: -50px;
                    min-width: 280px;
                }
        
                .ol-popup:after,
                .ol-popup:before {
                    top: 100%;
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                }
        
                .ol-popup:after {
                    border-top-color: white;
                    border-width: 10px;
                    left: 48px;
                    margin-left: -10px;
                }
        
                .ol-popup:before {
                    border-top-color: #cccccc;
                    border-width: 11px;
                    left: 48px;
                    margin-left: -11px;
                }
        
                .ol-popup-closer {
                    text-decoration: none;
                    position: absolute;
                    top: 2px;
                    right: 8px;
                }
        
                .ol-popup-closer:after {
                    content: "✖";
                }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id='map' class="map" />
        <div id='popup' class="ol-popup">
            <a href="#" id='popup-closer' class="ol-popup-closer"></a>
            <div id='popup-content'></div>
        </div>
        <script>
            var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');

            var overlay = new ol.Overlay({
                element: container,
                autoPanAnimation: {
                    duration: 250
                }
            });

            closer.onclick = function(){
                overlay.setPosition(undefined);
                closer.blur();
                return false;
            };
            var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.TileJSON({
                            url:
                                "https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q",
                            crossOrigin: "anonymous"
                        })
                    })
                ],
                overlays:[overlay],
                target: 'map',
                view: new ol.View({
                    center: [0,0],
                    zoom: 2
                })
            });

            map.on("singleclick", function(evt){
                var coordinate = evt.coordinate;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

                content.innerHTML = "<p>你点击了这里:</p><code>" + hdms + "</code>";
                overlay.setPosition(coordinate);
            });
        </script>
    </body>
</html>